<template>
  <div id="DeatilsCatalog">
    <el-card class="box-card">
      <div>
        <div class="article-catalog">
          <slot></slot>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-icon :size="20" style="transform: translateY(4px)">
            <Watch />
          </el-icon>
          <span>最新文章</span>
        </div>
      </template>
      <div>
        <div class="item" v-for="item in newArticleList" :key="item.id" @click="handleDeatlis(item._id)">
          <el-image :src="$store.state.UrlBase+item.bg" style="width: 80px; height: 58px" fit="cover" />
          <div class="info">
            <div class="title">{{item.title}}</div>
            <div class="createTime">{{dayjs(item.createTime - 0).format('YYYY/MM/DD')}}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>


<script>
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { reactive, toRefs, onMounted } from 'vue'
import http from '@/utils/http'
export default {
  name: 'DetailCatalog',
  setup (props) {
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      newArticleList: [],
    })
    // 获取最新文章
    onMounted(() => {
      http.get(`/article?page=1&limite=2`).then(res => {
        data.newArticleList = res.data.info.data
      })
    })
    // 跳转到详情页 
    function handleDeatlis (id) {
      if (id === route.query.id) return
      router.replace(`/detail?id=${id}`)
      setTimeout(() => {
        location.reload()
      });
    }

    return {
      ...toRefs(data),
      dayjs,
      handleDeatlis
    }
  }
}
</script>

<style lang="scss" scoped>
.article-catalog {
  overflow: hidden;
}
.activeDom {
  color: #23d5ab;
}
#DeatilsCatalog {
  position: sticky;
  top: 10px;
}
.box-card {
  margin: 30px auto;
  color: #4c4948;
  letter-spacing: 2px;
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
}
.domTitle {
  display: block;
  &:hover {
    color: #23d5ab;
  }
}
.item {
  display: flex;
  width: 100%;
  margin: 10px 0;
  padding: 0 0 5px;
  border-bottom: 1px dashed #ddd;
  cursor: url(https://static.talkxj.com/css/pointer.cur), default;
  .info {
    width: 140px;
    margin-left: 10px;
    font-size: 12px;
    .title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .createTime {
      color: #888;
    }
  }
  &:hover .title {
    color: #23d5ab;
  }
}
</style>